<template>
	<div>
		<el-row style="display: flex;flex-wrap: wrap;" :gutter="10">
			<el-col
				v-for="(processItem, processIndex) in dataList"
				:key="processIndex"
				:xl="12"
				:lg="12"
				:md="24"
				:sm="24"
				:xs="24"
			>
				<div style="background: #e8eaec;padding:  10px;border-radius: 6px;margin-bottom: 10px;">
					<div class="flex-between-center margin-bottom-4">
						<el-tag>
							<span class="el-icon-paperclip item-gap"></span>
							<span style="font-weight: 500;font-size: 13px;">{{ processItem.processName }}</span>
							<span> ({{ processItem.machineList.length }}台)</span>
						</el-tag>
						<el-button v-if="pageType !== 'detail'" size="mini" icon="el-icon-plus" @click="onAddBtn(processIndex)"></el-button>
					</div>
					<el-form ref="ruleForm" :model="processItem" :hide-required-asterisk="pageType === 'detail'" label-width="120px" :show-message="false">
						<el-row class="flex-start-center-wrap">
							<!--<el-col :span="12">
								<el-form-item class="margin-bottom-4" label="品种">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.productName }}</span>
									<jk-input v-else v-model="processItem.productName" disabled size="small" :clearable="false" placeholder="品种" @change="onUpdate"></jk-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item class="margin-bottom-4" label="批号">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.batchCode }}</span>
									<jk-input v-else v-model="processItem.batchCode" disabled size="small" :clearable="false" placeholder="批号" @change="onUpdate"></jk-input>
								</el-form-item>
							</el-col>-->

							<!--输入颜色-->
							<el-col v-if="processItem.processCode.toUpperCase() !== 'SM'" :span="12">
								<el-form-item v-show="processItem.processCode.toUpperCase() !== 'SM'" class="margin-bottom-4" :label="getColorInfoByProcess(processItem.processCode).inputName">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.inputTubeColorList ? processItem.inputTubeColorList.map(x => x.name).join(',') : '' }}</span>
									<checkboxPopover
										v-else
										:font-size="12"
										:title="getColorInfoByProcess(processItem.processCode).inputName"
										:default-list.sync="processItem.inputTubeColorList"
										:option-list="processItem.inputColorList"
										@change="onColorChange($event, 'inputTubeColorList', processIndex)"
									></checkboxPopover>
								</el-form-item>
							</el-col>
							<!--输出颜色-->
							<el-col :span="12">
								<el-form-item class="margin-bottom-4" :label="getColorInfoByProcess(processItem.processCode).outName">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.outputTubeColorList ? processItem.outputTubeColorList.map(x => x.name).join(',') : '' }}</span>
									<checkboxPopover
										v-else
										:font-size="12"
										:title="getColorInfoByProcess(processItem.processCode).outName"
										:default-list.sync="processItem.outputTubeColorList"
										:option-list="processItem.outColorList"
										@change="onColorChange($event, 'outputTubeColorList', processIndex)"
									></checkboxPopover>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item class="margin-bottom-4" label="定量(g/m)">
									<div class="flex-start">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.gramWeight }}</span>
										<jk-number-input v-else v-model="processItem.gramWeight" size="small" style="width: 100%;" placeholder="克重" @change="onGraAndMetChange($event, 'gramWeight', processIndex)" />
										<span>~</span>
										<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.meters }}</span>
										<jk-number-input v-else v-model="processItem.meters" size="small" style="width: 100%;" placeholder="米长" @change="onGraAndMetChange($event, 'meters', processIndex)" />
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item class="margin-bottom-4" label="排产数量">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ processItem.productionQty }}</span>
									<jk-input v-else v-model="processItem.productionQty" size="small" :clearable="false" placeholder="排产数量" @change="onUpdate"></jk-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item class="margin-bottom-10" label="备注">
									<el-input v-model="processItem.remark" :disabled="pageType === 'detail'" size="small" type="textarea" :rows="1" placeholder="请输入" @change="onUpdate"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<notice-machine-list
						:page-type="pageType"
						:process-code="processItem.processCode"
						:show-input-color="processItem.showInputColor"
						:show-out-color="processItem.showOutColor"
						:show-start-time="processItem.showStartTime"
						:input-color-list="processItem.inputColorList"
						:out-color-list="processItem.outColorList"
						:machine-list.sync="processItem.machineList"
						@update="onUpdate"
					></notice-machine-list>
				</div>
			</el-col>
		</el-row>
		<modify-machine-technology-order-dialog
			:page-type="pageType"
			:process-code="editProcessCode"
			:form-data="editMachineTechnologyInfo"
			:dialog-state="machineTechnologyState"
			@on-visible-change="onVisibleChangeOfModifyMachineTechnologyDialog"
			@on-confirm="onConfirmOfModifyMachineTechnologyDialog"
		></modify-machine-technology-order-dialog>
		<checkbox-machine-dialog
			:default-process-name="addProcessItem.processName"
			:default-select-rows="addProcessItem.machineList"
			check-key-name="machineId"
			:dialog-state="selectMachineDialogState"
			@on-confirm="onConfirmBtnOfSelectMachineDialog"
			@on-visible-change="onVisibleChangeOfSelectMachineDialog"
		></checkbox-machine-dialog>
	</div>
</template>
<script>
    import modifyMachineTechnologyOrderDialog from '../../../productionNoticeOrder/components/modify-machine-technology-order-dialog';
    import remoteSearchTechnologyOrderInput from '../../../order/components/remote-search-technology-order-input';
    import remoteSearchProductInput from '../../../order/components/remote-search-product-input';
    import remoteSearchBatchCodeInput from '../../../qhPrd/productConfigCotton/components/remote-search-batch-code-input';
    import checkboxMachineDialog from '../../../../schedule/empMachine/components/checkbox-machine-dialog';
    import { formatDate } from '../../../../../utils/jk/jk-tool';
    import getTubeColor from './form-box/get-tube-color';
    import checkboxPopover from '../../../order/components/form-box/checkbox-popover';
    import noticeMachineList from '../../../productionNoticeOrder/components/notice-machine-list';

    export default {
        mixins: [getTubeColor],
        components: {
            noticeMachineList,
            checkboxPopover,
            checkboxMachineDialog,
            remoteSearchBatchCodeInput,
            remoteSearchProductInput,
            remoteSearchTechnologyOrderInput,
            modifyMachineTechnologyOrderDialog
        },
        props: {
            processScheduleList: {
                type: Array,
                default() {
                    return [];
                }
            },
            processInfo: {
                type: Object,
                default() {
                    return {};
                }
            },
            machineList: {
                type: Array,
                default() {
                    return [];
                }
            },
            pageType: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                addProcessItem: {},
                processIdx: null,
                isBatchSet: false,
                editProcessCode: '',
                dataList: [],
                machineIdx: null,
                editMachineTechnologyInfo: {},
                machineTechnologyState: false,
                selectMachineDialogState: false,
                dlVal: null,
                mcVal: null,
                dateVal: '',
                defaultMachineInfo: {
                    'actualEndDate': '',
                    'actualStartDate': '',
                    'changeDate': '',
                    'completionQty': null,
                    'dailyYield': null,
                    'gramWeight': null,
                    'machineCode': '',
                    'machineId': null,
                    'machineName': '',
                    'meters': null,
                    'processCode': '',
                    'processId': null,
                    'processName': '',
                    'productionDays': null,
                    'productionPlanId': null,
                    'productionPlanLineId': null,
                    'productionQty': null,
                    'specSheet': {},
                    'subPlanEndDate': '',
                    'subPlanStartDate': ''
                },
                defaultSpecSheetInfo: {
                    'batchCode': '',
                    'code': '',
                    'dailyYield': null,
                    'efficiencyPercent': null,
                    'fixedLength': null,
                    'gramWeight': null,
                    'id': null,
                    'machineModelCode': '',
                    'machineModelId': null,
                    'machineModelName': '',
                    'meters': null,
                    'moistureRegain': null,
                    'numbers': null,
                    'processCode': '',
                    'processId': null,
                    'processName': '',
                    'productCode': '',
                    'productId': null,
                    'productModels': '',
                    'productName': '',
                    'specDate': '',
                    'specEmpId': null,
                    'specEmpName': '',
                    'specSheetParamList': [],
                    'spindleNum': 0
                }
            };
        },
        methods: {
            onGraAndMetChange(e, key, idx) {
                this.processIdx = idx;
                this.dataList[this.processIdx].machineList.forEach(x => {
                    this.$set(x, key, e);
                    this.$set(x.specSheet, key, e);
                });
                this.onUpdate();
            },
            onColorChange(e, key, idx) {
                this.processIdx = idx;
                this.dataList[this.processIdx].machineList.forEach(x => {
                    this.$set(x, key, e);
                });
                this.onUpdate();
            },
            onConfirmBtnOfDatePopover(idx) {
                this.processIdx = idx;
                this.dataList[this.processIdx].machineList.forEach(x => {
                    this.$set(x, 'subPlanStartDate', this.dateVal);
                });
                this.onUpdate();
            },
            onConfirmBtnOfDmPopover(idx) {
                this.processIdx = idx;
                this.dataList[this.processIdx].machineList.forEach(x => {
                    this.$set(x, 'gramWeight', this.dlVal);
                    this.$set(x, 'meters', this.mcVal);
                });
                this.onUpdate();
            },
            onVisibleChangeOfSelectMachineDialog(e) {
                this.selectMachineDialogState = e;
            },
            onConfirmBtnOfSelectMachineDialog(e) {
                if (e.length) {
                    this.selectMachineDialogState = false;
                    let item = {};
                    const machineTechnologyInfo = JSON.parse(JSON.stringify(this.defaultSpecSheetInfo));
                    const changeD = formatDate(Date.now());
                    const editProcessItem = this.dataList[this.processIdx];
                    machineTechnologyInfo.gramWeight = editProcessItem.gramWeight;
                    machineTechnologyInfo.meters = editProcessItem.meters;
                    e.forEach(x => {
                        item = {
                            gramWeight: editProcessItem.gramWeight,
                            meters: editProcessItem.meters,
                            changeDate: changeD,
                            openingState: 0,
                            machineId: x.id,
                            machineCode: x.code,
                            machineName: x.name,
                            machineModelId: x.machineModelId,
                            machineModelCode: x.machineModelCode,
                            machineModelName: x.machineModelName,
                            processId: x.processId,
                            processCode: x.processCode,
                            processName: x.processName,
                            specSheet: machineTechnologyInfo
                        };
                        this.dataList[this.processIdx].machineList.push(item);
                    });
                }
                this.onUpdate();
            },
            onAddBtn(index) {
                this.processIdx = index;
                this.addProcessItem = this.dataList[index];
                this.selectMachineDialogState = true;
            },
            onTableInnerDailyYieldChange(e, scope) {
                this.onCalMachineItemVal(e, 'dailyYield', scope.row, scope.rowIndex);
                this.onUpdate();
            },
            onTableInnerPlanStartDate(e, scope) {
                // this.onCalMachineItemVal(e, 'subPlanStartDate', scope.row, scope.rowIndex);
                this.onUpdate();
            },
            onTableInnerPlanEndDate(e, scope) {
                this.onCalMachineItemVal(e, 'subPlanEndDate', scope.row, scope.rowIndex);
                this.onUpdate();
            },
            onGramWeightChange(e, processIndex, scope) {
                this.$set(this.dataList[processIndex].machineList[scope.rowIndex], 'gramWeight', e);
                this.$set(this.dataList[processIndex].machineList[scope.rowIndex].specSheet, 'gramWeight', e);
                this.onUpdate();
            },
            onMetersChange(e, processIndex, scope) {
                this.$set(this.dataList[processIndex].machineList[scope.rowIndex], 'meters', e);
                this.$set(this.dataList[processIndex].machineList[scope.rowIndex].specSheet, 'meters', e);
                this.onUpdate();
            },
            /* onSelectTechnologyOrderChange(e) {
                if (e && Object.keys(e).length) {
                    this.$set(this.dataList[processIndex].specSheet, 'id', e.id);
                    this.$set(this.dataList[processIndex].specSheet, 'code', e.code);
                    this.$set(this.dataList[processIndex].specSheet, 'machineModelId', e.machineModelId);
                    this.$set(this.dataList[processIndex].specSheet, 'machineModelCode', e.machineModelCode);
                    this.$set(this.dataList[processIndex].specSheet, 'machineModelName', e.machineModelName);

                    this.$set(this.dataList[processIndex].specSheet, 'dailyYield', e.dailyYield);
                    this.$set(this.dataList[processIndex].specSheet, 'moistureRegain', e.moistureRegain);
                    this.$set(this.dataList[processIndex].specSheet, 'efficiencyPercent', e.efficiencyPercent);
                    this.$set(this.dataList[processIndex].specSheet, 'gramWeight', e.gramWeight);
                    this.$set(this.dataList[processIndex].specSheet, 'meters', e.meters);
                    // 工艺项
                    this.$set(this.dataList[processIndex].specSheet, 'specSheetParamList', e.specSheetParamList);
                } else {
                    this.$set(this.dataList[processIndex].specSheet, 'id', null);
                    this.$set(this.dataList[processIndex].specSheet, 'code', '');
                    this.$set(this.dataList[processIndex].specSheet, 'machineModelId', null);
                    this.$set(this.dataList[processIndex].specSheet, 'machineModelCode', '');
                    this.$set(this.dataList[processIndex].specSheet, 'machineModelName', '');

                    this.$set(this.dataList[processIndex].specSheet, 'dailyYield', null);
                    this.$set(this.dataList[processIndex].specSheet, 'moistureRegain', null);
                    this.$set(this.dataList[processIndex].specSheet, 'efficiencyPercent', null);
                    this.$set(this.dataList[processIndex].specSheet, 'gramWeight', null);
                    this.$set(this.dataList[processIndex].specSheet, 'gramWeight', null);
                    this.$set(this.dataList[processIndex].specSheet, 'specSheetParamList', []);
                }
                this.dataList[processIndex].machineList.forEach(x => {
                    this.$set(x.specSheet, 'id', e.id);
                    this.$set(x.specSheet, 'code', e.code);
                    this.$set(x.specSheet, 'machineModelId', e.machineModelId);
                    this.$set(x.specSheet, 'machineModelCode', e.machineModelCode);
                    this.$set(x.specSheet, 'machineModelName', e.machineModelName);

                    this.$set(x.specSheet, 'dailyYield', e.dailyYield);
                    this.$set(x.specSheet, 'moistureRegain', e.moistureRegain);
                    this.$set(x.specSheet, 'efficiencyPercent', e.efficiencyPercent);
                    this.$set(x.specSheet, 'gramWeight', e.gramWeight);
                    this.$set(x.specSheet, 'meters', e.meters);
                    this.$set(x.specSheet, 'specSheetParamList', e.specSheetParamList);
                });
                this.onUpdate();
            },*/
            onEditMachineTechnologyBtn(scope, processIndex, isBatchSet, processItem) {
                this.editProcessCode = processItem.processCode;
                this.isBatchSet = isBatchSet;
                this.processIdx = processIndex;
                if (isBatchSet) {
                    this.machineIdx = null;
                    this.editMachineTechnologyInfo = JSON.parse(JSON.stringify(this.defaultSpecSheetInfo));
                } else {
                    this.machineIdx = scope.rowIndex;
                    this.editMachineTechnologyInfo = scope.row.specSheet || {};
                }
                this.machineTechnologyState = true;
            },
            onDeleteBtn({ rowIndex }, processIndex) {
                this.dataList[processIndex].machineList.splice(rowIndex, 1);
                this.onUpdate();
            },
            onVisibleChangeOfModifyMachineTechnologyDialog(e) {
                this.machineTechnologyState = e;
            },
            onConfirmOfModifyMachineTechnologyDialog(item) {
                if (this.isBatchSet) {
                    this.dataList[this.processIdx].machineList.forEach(x => {
                        this.$set(x, 'dailyYield', item.dailyYield);
                        this.$set(x, 'gramWeight', item.gramWeight);
                        this.$set(x, 'meters', item.meters);
                        this.$set(x, 'specSheet', item);
                    });
                } else {
                    this.$set(this.dataList[this.processIdx].machineList[this.machineIdx], 'dailyYield', item.dailyYield);
                    this.$set(this.dataList[this.processIdx].machineList[this.machineIdx], 'gramWeight', item.gramWeight);
                    this.$set(this.dataList[this.processIdx].machineList[this.machineIdx], 'meters', item.meters);
                    this.$set(this.dataList[this.processIdx].machineList[this.machineIdx], 'specSheet', item);
                }
                this.machineTechnologyState = false;
                this.onUpdate();
            },
            onUpdate() {
                this.$emit('update:processScheduleList', JSON.parse(JSON.stringify(this.dataList)));
            }
        },
        watch: {
            processScheduleList: {
                handler(newVal) {
                    const cpData = newVal ? JSON.parse(JSON.stringify(newVal)) : [];
                    this.dataList = cpData;
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
